<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

<script>
    $(function () {
        var colM = [
            { title: "Order ID", width: 100, dataIndx: "OrderID" },
            { title: "Customer Name", width: 130, dataIndx: "CustomerName" },
            { title: "Product Name", width: 190, dataIndx: "ProductName" },
            { title: "Unit Price", width: 100, dataIndx: "UnitPrice", align: "right" },
            { title: "Quantity", width: 100, dataIndx: "Quantity", align: "right" },
		    { title: "Order Date", width: 100, dataIndx: "OrderDate" },
		    { title: "Required Date", width: 100, dataIndx: "RequiredDate" },
		    { title: "Shipped Date", width: 100, dataIndx: "ShippedDate" },
            { title: "ShipCountry", width: 100, dataIndx: "ShipCountry" },
            { title: "Freight", width: 100, align: "right", dataIndx: "Freight" },
            { title: "Shipping Name", width: 120, dataIndx: "ShipName" },
            { title: "Shipping Address", width: 180, dataIndx: "ShipAddress" },
            { title: "Shipping City", width: 100, dataIndx: "ShipCity" },
            { title: "Shipping Region", width: 110, dataIndx: "ShipRegion" },
            { title: "Shipping Postal Code", width: 130, dataIndx: "ShipPostalCode" }
		];
        var dataModel = {
            location: "remote",
            sorting: "local",
            dataType: "JSON",
            method: "GET",
            url: "/pro/invoice/get",
            //url: "/invoice.php", //for PHP
            getData: function (dataJSON) {
                return { data: dataJSON.data };
            }
        }

        var grid1 = $("div#grid_paging").pqGrid({
            width: 900,
            height: 400,
            collapsible: false,
            pageModel: { type: "local", rPP: 20, strRpp: "{0}", strDisplay: "{0} to {1} of {2}" },
            dataModel: dataModel,
            colModel: colM,
            wrap: false, hwrap: false,
            freezeCols: 2,
            //move paging toolbar to top in create event callback.
            create: function (ui) {
                var $grid = $(this),
                    $pager = $grid.find(".pq-grid-bottom").find(".pq-pager");
                if ($pager && $pager.length) {
                    $pager = $pager.detach();
                    $grid.find(".pq-grid-top").append($pager);
                }
            },
            numberCell: { resizable: true, title: "#" },
            showBottom:false,
            title: "Shipping Orders",
            resizable: true
        });
    });
        
</script>    
</head>
<body>

<div id="grid_paging" style="margin:5px auto;"></div>

</body>

</html>
